<template>
    <div id="box">
        <!-- <h3>热门推荐</h3> -->
        <div v-for="(item,index) in vehicles">
            <li class="item">
                <div class="img_box"><img v-bind:src="item.image" alt="" @click="docs(item.carKey)"></div>
                <p v-html="item.brand"></p>
                <span class="price" :style="{color:'red'}">&yen;{{item.price}}</span>
            </li>
        </div>
    </div>
</template>

<script>

export default {
        data() {
            return{
                vehicles:[{
                carKey:"11",
                image:"https://www.sgmw.com.cn/bphgv/images/lunbo8.jpg",
                brand:"2023年新款五菱宏光",
                price:"99",
                address:"海南省海口市"
                },
                {
                    carKey:"12",
                    image:"https://www.2008php.com/2014_Website_appreciate/2015-07-16/20150716181129wUI9dwUI9d.jpg",
                    brand:"蓝色车",
                    price:"123",
                    address:"天津市北辰区"
                },
                {
                    carKey:"13",
                    image:"https://www.2008php.com/2015_Website_appreciate/2015-07-16/201507161944453T1xR3T1xR.jpg",
                    brand:"三菱EVO",
                    price:"100",
                    address:"天津市北辰区"
                },
                {
                    carKey:"14",
                    image:"https://wallup.net/wp-content/uploads/2016/03/12/335113-Mitsubishi-Mitsubishi_Lancer-evo-tuning-car.jpg",
                    brand:"EVO",
                    price:"66",
                    address:"天津市北辰区"
                }
            ]
        }
    },
    methods: {
        docs(vehicle_carKey){
            this.$router.push({
			          name: 'order',
			          params: {
			            vehicle:this.vehicles[vehicle_carKey - 11]
			          }
			        });
                    

        }
    }
}
</script>

<style lang="less">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        // // h3 {
        //     text-align: center;
        // }
        .price{
            margin-left: 10px;
        }
 
        #box {
            width: 1200px;
            // float: left;
            // box-sizing: border-box;
            // height: 100%;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            margin: auto;
        }
 
 
        .item {
            float: left;
            width: 23%;
            height: 266px;
            margin: 0 5px 8px;
            // text-align: center;
            background: #fff;
        }
 
        .item .img_box {
            width: 90%;
            height: 120px;
            margin: 30px auto;
        }
 
        .img_box img {
            width: 100%;
            height: 100%;
        }
 
        .item p {
            font-size: 20px;
            line-height: 20px;
            height: 25px;
            padding: 0 10px;
            /* white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; */
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
 
        .more2_info_self {
            background-color: #e1251b;
            border-radius: 2px;
            color: #fff;
            padding: 0 5px;
            margin-right: 4px;
            line-height: 16px;
            height: 16px;
            html{font-size: 12px;}
            font-style: normal;
        }

</style>